<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡功能</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .main{
        width: 1200px;
        height: 600px;
        background: rgba(221, 109, 255,.6);
        padding: 40px;
        border-radius: 20px;
    }
    .main .top{
        height: 60px;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        margin-bottom: 30px;
    }

    .main .bottom{
        width: 100%;
        height: 80%;
        background: rgba(93, 185, 241, 0.6);
        padding: 30px;
        border-radius: 15px;
        color: black;
    }
    .col{
        background: rgba(121, 167, 223,.7);
        color: #fff;
        border-radius: 10px;
    }
</style>
<body>

    <div id="app">  
        <div class="main">
            <div class="top">
                <div class="box" @click="fun(index,$event)" v-for="(item,index) of str" >{{item}}</div>
            </div>
            <div class="bottom">
                <div v-if="num == 0" class="in">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem esse, nobis vero ducimus ad quam repellat alias neque temporibus. Harum, molestias. Ratione, deserunt explicabo! Temporibus, numquam in? Ullam, qui distinctio.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem esse, nobis vero ducimus ad quam repellat alias neque temporibus. Harum, molestias. Ratione, deserunt explicabo! Temporibus, numquam in? Ullam, qui distinctio.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem esse, nobis vero ducimus ad quam repellat alias neque temporibus. Harum, molestias. Ratione, deserunt explicabo! Temporibus, numquam in? Ullam, qui distinctio.
                    </p>
                </div>
                <div v-if="num == 1">
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus quidem! Debitis obcaecati iste odio a laboriosam aliquam at nesciunt quos temporibus voluptas quis eius molestiae tempora, eaque accusantium enim?
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus quidem! Debitis obcaecati iste odio a laboriosam aliquam at nesciunt quos temporibus voluptas quis eius molestiae tempora, eaque accusantium enim?
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus quidem! Debitis obcaecati iste odio a laboriosam aliquam at nesciunt quos temporibus voluptas quis eius molestiae tempora, eaque accusantium enim?
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus quidem! Debitis obcaecati iste odio a laboriosam aliquam at nesciunt quos temporibus voluptas quis eius molestiae tempora, eaque accusantium enim?

                    </p>
                </div>
                <div v-if="num == 2">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti esse voluptatum, nam a ab ea et rem! Mollitia excepturi voluptates, assumenda accusantium similique, nobis rerum consequatur facilis dolor quod modi!
                    </p>
                </div>
                <div v-if="num == 3">
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum amet dignissimos natus eius sapiente, quas ea obcaecati ad, recusandae officia nesciunt commodi dolores quis at! Tempore magnam nostrum laboriosam nobis.
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum amet dignissimos natus eius sapiente, quas ea obcaecati ad, recusandae officia nesciunt commodi dolores quis at! Tempore magnam nostrum laboriosam nobis.
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum amet dignissimos natus eius sapiente, quas ea obcaecati ad, recusandae officia nesciunt commodi dolores quis at! Tempore magnam nostrum laboriosam nobis.
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum amet dignissimos natus eius sapiente, quas ea obcaecati ad, recusandae officia nesciunt commodi dolores quis at! Tempore magnam nostrum laboriosam nobis.
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum amet dignissimos natus eius sapiente, quas ea obcaecati ad, recusandae officia nesciunt commodi dolores quis at! Tempore magnam nostrum laboriosam nobis.
                    </p>
                </div>
            </div>

        </div>
        
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    num:0,
                    str:["新闻","电影","小说","动漫"],
                }
            },
            methods:{
                fun(e,c){
                    const box = document.getElementsByClassName("box")
                    for(let i = 0;i<box.length;i++){
                        box[i].classList.remove("col")
                    }
                    this.num= e
                    c.target.classList.add("col")
                },
         
            },
            mounted(){
                const box = document.getElementsByClassName("box")[0]
                    
                        box.classList.add("col")
                    
            }
        })

    </script>
</body>
</html>